<template>
    <div class="box" :style="{ height: boxHeight + 'px' }">
        <div class="box-header box-header-panel">
            <i class="icon icon-broadcaster"></i>
            <span class="title">{{ title }}</span>
            <div class="box-extra">
                <button class="c-button icon-btn" @click="toggleBoxBody">
                    <i class="icon" :class="iconArrowStyle"></i>
                </button>
            </div>
        </div>
        <div class="box-body" v-show="visible.boxBody">
            <div class="item">
                <Tabs
                    type="card"
                    :animated="false"
                    @on-click="clearDeviceSelection"
                >
                    <TabPane label="文件发布">
                        <div class="audio-player-wrapper">
                            <div class="audio-item-left">
                                <div class="audio-header">
                                    <span class="title">选择设备</span>
                                </div>
                                <div class="audio-body">
                                    <div class="audio-switch-wrapper">
                                        <span
                                            class="text"
                                            v-if="!deviceAllChecked"
                                            >全选设备</span
                                        >
                                        <span
                                            class="text"
                                            v-if="deviceAllChecked"
                                            >取消全选</span
                                        >
                                        <i-switch
                                            v-model="deviceAllChecked"
                                        ></i-switch>
                                    </div>

                                    <div class="audio-list">
                                        <CheckboxGroup
                                            v-model="deviceChecked"
                                            class="audio-checkbox-list"
                                        >
                                            <Checkbox label="TV-6902">
                                                TV-6902
                                            </Checkbox>
                                            <Checkbox label="TV-6903">
                                                TV-6903
                                            </Checkbox>
                                            <Checkbox label="TV-6904">
                                                TV-6904
                                            </Checkbox>
                                            <Checkbox label="TV-6905">
                                                TV-6905
                                            </Checkbox>
                                            <Checkbox label="TV-6906">
                                                TV-6906
                                            </Checkbox>
                                            <Checkbox label="TV-6907">
                                                TV-6907
                                            </Checkbox>
                                            <Checkbox label="TV-6908">
                                                TV-6908
                                            </Checkbox>
                                            <Checkbox label="TV-6909">
                                                TV-6909
                                            </Checkbox>
                                        </CheckboxGroup>
                                    </div>
                                </div>
                            </div>
                            <div class="audio-item-right">
                                <div
                                    class="audio-slot"
                                    v-show="!visible.playing"
                                >
                                    <div class="audio-header">
                                        <span class="title">选择文件</span>
                                    </div>
                                    <div class="audio-body">
                                        <div class="audio-list">
                                            <CheckboxGroup
                                                class="audio-single-list"
                                                v-model="fileSelected"
                                                @on-change="selectFile"
                                                v-show="visible.fileSelection"
                                            >
                                                <Checkbox label="audio-file-1">
                                                    audio-file-1
                                                </Checkbox>
                                                <Checkbox label="audio-file-2">
                                                    audio-file-2
                                                </Checkbox>
                                                <Checkbox label="audio-file-3">
                                                    audio-file-3
                                                </Checkbox>
                                                <Checkbox label="audio-file-4">
                                                    audio-file-4
                                                </Checkbox>
                                                <Checkbox label="audio-file-5">
                                                    audio-file-5
                                                </Checkbox>
                                                <Checkbox label="audio-file-5">
                                                    audio-file-5
                                                </Checkbox>
                                                <Checkbox label="audio-file-6">
                                                    audio-file-6
                                                </Checkbox>
                                                <Checkbox label="audio-file-7">
                                                    audio-file-7
                                                </Checkbox>
                                                <Checkbox label="audio-file-8">
                                                    audio-file-8
                                                </Checkbox>
                                            </CheckboxGroup>
                                        </div>
                                    </div>
                                </div>
                                <div
                                    class="audio-slot"
                                    v-show="visible.playing"
                                >
                                    <div
                                        class="audio-header"
                                        style="border: none"
                                    >
                                        <span class="title">
                                            <Checkbox
                                                v-model="playRepeat"
                                                class="audio-header-toggle"
                                            >
                                                <i
                                                    class="icon icon-play-repeat"
                                                ></i>
                                                <span class="text"
                                                    >循环播放</span
                                                >
                                            </Checkbox>
                                        </span>
                                    </div>
                                    <div class="audio-body">
                                        <i class="icon icon-wave"></i>
                                        <div class="audio-text-countup">
                                            <span class="bullet-red"></span>
                                            <span class="text">{{
                                                playingTimeCount
                                            }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="audio-item-footer">
                                <button
                                    type="button"
                                    @click="playBroadcast"
                                    v-if="!visible.playing"
                                    class="btn btn-broadcaster"
                                >
                                    <span class="text">发布广播</span>
                                </button>
                                <button
                                    type="button"
                                    @click="stopBroadcast"
                                    v-if="visible.playing"
                                    class="btn btn-broadcaster"
                                >
                                    <span class="text">停止广播</span>
                                </button>
                            </div>
                        </div>
                    </TabPane>
                    <TabPane label="即时喊话">
                        <div class="audio-player-wrapper">
                            <div class="audio-item-left">
                                <div class="audio-header">
                                    <span class="title">选择设备</span>
                                </div>
                                <div class="audio-body">
                                    <div class="audio-switch-wrapper">
                                        <span
                                            class="text"
                                            v-if="!deviceAllChecked"
                                            >全选设备</span
                                        >
                                        <span
                                            class="text"
                                            v-if="deviceAllChecked"
                                            >取消全选</span
                                        >
                                        <Switch
                                            v-model="deviceAllChecked"
                                        ></Switch>
                                    </div>

                                    <div class="audio-list">
                                        <CheckboxGroup
                                            v-model="deviceChecked"
                                            class="audio-checkbox-list"
                                        >
                                            <Checkbox label="TV-6902">
                                                TV-6902
                                            </Checkbox>
                                            <Checkbox label="TV-6903">
                                                TV-6903
                                            </Checkbox>
                                            <Checkbox label="TV-6904">
                                                TV-6904
                                            </Checkbox>
                                            <Checkbox label="TV-6905">
                                                TV-6905
                                            </Checkbox>
                                            <Checkbox label="TV-6906">
                                                TV-6906
                                            </Checkbox>
                                            <Checkbox label="TV-6907">
                                                TV-6907
                                            </Checkbox>
                                            <Checkbox label="TV-6908">
                                                TV-6908
                                            </Checkbox>
                                            <Checkbox label="TV-6909">
                                                TV-6909
                                            </Checkbox>
                                        </CheckboxGroup>
                                    </div>
                                </div>
                            </div>
                            <div class="audio-item-right">
                                <div
                                    class="audio-slot"
                                    v-show="!visible.speaking"
                                >
                                    <div class="audio-body">
                                        <i class="icon icon-speak"></i>
                                    </div>
                                </div>
                                <div
                                    class="audio-slot"
                                    v-show="visible.speaking"
                                >
                                    <div
                                        class="audio-header"
                                        style="border: none"
                                    >
                                        <span class="title">&nbsp;</span>
                                    </div>
                                    <div class="audio-body">
                                        <i class="icon icon-wave"></i>
                                        <div class="audio-text-countup">
                                            <span class="bullet-red"></span>
                                            <span class="text">{{
                                                speechTimeCount
                                            }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="audio-item-footer">
                                <button
                                    type="button"
                                    @click="startSpeech"
                                    v-if="!visible.speaking"
                                    class="btn btn-broadcaster"
                                >
                                    <span class="text">开始喊话</span>
                                </button>
                                <button
                                    type="button"
                                    @click="stopSpeech"
                                    v-if="visible.speaking"
                                    class="btn btn-broadcaster"
                                >
                                    <span class="text">停止喊话</span>
                                </button>
                            </div>
                        </div>
                    </TabPane>
                </Tabs>
            </div>
        </div>
    </div>
</template>

<script>
    import { timeShift } from "@/lib/extension";
    export default {
        name: "",
        data() {
            return {
                deviceAllChecked: false,
                deviceChecked: [],
                fileSelected: [],
                visible: {
                    fileSelection: true,
                    playing: false,
                    speaking: false,
                    boxBody: true,
                },
                iconArrowStyle: "icon-arrow-up",
                playingTimeCount: "00:00:00",
                playingTimeObject: null,
                playRepeat: false,
                speechTimeCount: "00:00:00",
                speechTimeObject: null,
                boxHeight: 632,
                countTick: {
                    play: null,
                    speech: null,
                },
            };
        },
        watch: {
            deviceAllChecked: {
                handler(n) {
                    if (n) {
                        this.deviceChecked = [
                            "TV-6902",
                            "TV-6903",
                            "TV-6904",
                            "TV-6905",
                            "TV-6906",
                            "TV-6907",
                            "TV-6908",
                            "TV-6909",
                        ];
                    } else {
                        this.deviceChecked = [];
                    }
                },
                immediate: true,
            },
        },
        props: {
            title: String,
        },
        methods: {
            selectFile() {
                this.fileSelected = [this.fileSelected.tail()];
            },
            clearDeviceSelection() {
                this.fileSelected = [];
                this.deviceAllChecked = false;
                this.deviceChecked = [];
                this.stopBroadcast();
                this.stopSpeech();
            },
            toggleBoxBody() {
                this.visible.boxBody = !this.visible.boxBody;
                if (this.visible.boxBody) {
                    this.iconArrowStyle = "icon-arrow-up";
                    this.boxHeight = 632;
                } else {
                    this.iconArrowStyle = "icon-arrow-down";
                    this.boxHeight = 72;
                }
            },
            playBroadcast() {
                this.visible.fileSelection = false;
                this.visible.playing = true;
                //调用接口广播音频
                this.playCountUp();
            },
            playCountUp() {
                this.playingTimeObject = new Date(0, 0, 0, 0, 0, 0);
                const $this = this;
                if (!this.countTick.play) {
                    const tickFunction = () => {
                        const offset = 1000;
                        this.playingTimeObject = new Date(
                            this.playingTimeObject.getTime() + offset
                        );
                        let obj = {
                            hour:
                                this.playingTimeObject.getHours() < 10
                                    ? "0" + this.playingTimeObject.getHours()
                                    : this.playingTimeObject.getHours(),
                            minute:
                                this.playingTimeObject.getMinutes() < 10
                                    ? "0" + this.playingTimeObject.getMinutes()
                                    : this.playingTimeObject.getMinutes(),
                            seconds:
                                this.playingTimeObject.getSeconds() < 10
                                    ? "0" + this.playingTimeObject.getSeconds()
                                    : this.playingTimeObject.getSeconds(),
                        };
                        this.playingTimeCount = `${obj.hour}:${obj.minute}:${obj.seconds}`;
                    };
                    tickFunction();
                    this.countTick.play = setInterval(() => {
                        tickFunction();
                    }, 1000);
                }
            },
            stopBroadcast() {
                this.visible.fileSelection = true;
                this.visible.playing = false;
                this.playingTimeCount = "00:00:00";
                this.playingTimeObject = null;
                clearInterval(this.countTick.play);
                this.countTick.play = null;
                //调用接口停止广播
            },
            startSpeech() {
                this.visible.speaking = true;
                //调用接口传输喊话数据
                this.speechCountUp();
            },
            stopSpeech() {
                this.visible.speaking = false;
                this.speechTimeCount = "00:00:00";
                this.speechTimeObject = null;
                clearInterval(this.countTick.speech);
                this.countTick.speech = null;
                //调用接口停止喊话
            },
            speechCountUp() {
                this.speechTimeObject = new Date(0, 0, 0, 0, 0, 0);
                const $this = this;
                if (!this.countTick.speech) {
                    const tickFunction = () => {
                        const offset = 1000;
                        this.speechTimeObject = new Date(
                            this.speechTimeObject.getTime() + offset
                        );
                        let obj = {
                            hour:
                                this.speechTimeObject.getHours() < 10
                                    ? "0" + this.speechTimeObject.getHours()
                                    : this.speechTimeObject.getHours(),
                            minute:
                                this.speechTimeObject.getMinutes() < 10
                                    ? "0" + this.speechTimeObject.getMinutes()
                                    : this.speechTimeObject.getMinutes(),
                            seconds:
                                this.speechTimeObject.getSeconds() < 10
                                    ? "0" + this.speechTimeObject.getSeconds()
                                    : this.speechTimeObject.getSeconds(),
                        };
                        this.speechTimeCount = `${obj.hour}:${obj.minute}:${obj.seconds}`;
                    };
                    tickFunction();
                    this.countTick.speech = setInterval(() => {
                        tickFunction();
                    }, 1000);
                }
            },
        },
    };
</script>

<style lang="" scoped>
</style>